<template>
    <div>
        <div class="header">
            <div class="logo-box">

                <img src="../assets/game-logo1.png"  width="150" alt="logo">

                <span>王者荣耀游戏数据平台</span>
            </div>


        </div>
        <div class="container">
            <div>
                <div class="login-box">

                    <div class="login-box-header">
                        <h4>扫码登录</h4>
                        <h4>账户登录</h4>
                    </div>
                    <div class="login-box-form">
                        <div class="login-form-center">
                            <div class="login-form-inline">
                                <label><i class="el-icon-user-solid"></i></label><span><input type="text"
                                        v-model="loginForm.username"></span>
                            </div>
                            <div class="login-form-inline">
                                <label><i class="el-icon-s-goods"></i></label><span><input type="password"
                                        v-model="loginForm.password"></span>
                            </div>

                            <div class="question">
                                <a href="#">忘记密码</a>
                            </div>

                            <!-- 登录按钮 -->
                            <div class="login-form-inline">
                                <button class="btn" type="button" @click="login">登&nbsp;&nbsp;&nbsp;&nbsp;录</button>
                            </div>


                        </div>

                    </div>
                    <div class="login-box-foot">
                        <div class="login-form-method">
                            <div class="first">
                                <div class="qq">
                                </div>
                                <span><a href="#">QQ</a> </span>
                                <span>|</span>
                                <div class="vx"></div>
                                <span><a href="#">微信</a> </span>
                            </div>
                            <div class="second">

                                <span><i class="fa fa-arrow-circle-right"></i><a href="#">立即注册</a></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
                <ul>
                    <li>Copyright © 2022-2032   蓝桥涛哥-songzt@lanqiao.cn  版权所有</li>

                </ul>

        </div>


    </div>

</template>
<script>

export default {
    data() {
        return {
            loginForm: {
                username: "Bret",
                password: "Sincere@april.biz"

            }

        }

    },
    methods: {
        login() {

            fetch('http://47.241.102.141:3000/login', {
                method: 'post',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ username: this.loginForm.username, password: this.loginForm.password })

            })
                .then(response => response.json())
                .then(data => {
                    console.log(data)
                    alert(data.message);
                    if (data.success) {
                        //存储token到本地
                        this.$store.dispatch("login",{
                            data: JSON.stringify(data.data)
                        })
                        //跳转页面
                        this.$router.replace({ path: '/dashboard' });


                    }

                });



        }

    }



}

</script>


<style scoped lang="less">
@import url(../assets/css/style.css);
</style>